<style>
    ul {
        background-color: pink;
    }
    li {
        margin: 20px 0;
        background-color: green;
    }
    .tips{
        pointer-events:none;
        position: absolute; 
        width:100px;
        height:50px;
        background-color: yellow; 
        color:tomato;
        display:none;
    }
     #test{ 
        width:0; 
        height:0; 
        border-width:40px; 
        border-style:solid; 
        border-color:yellow transparent transparent; 
        font-size:0; 
        line-height:0;}

    </style>
    <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
        <li>005</li>
    </ul>
    <div class="tips">提示框</div>
        
    <script>
        var liObj=document.querySelectorAll("li")
        liObj.forEach(function(item,i){
            item.onmousemove=function(evt){
            var e=evt || window.event
            var divObj=document.querySelector(".tips")
            
            divObj.style.display="block"
            divObj.style.left=e.clientX+"px"
            divObj.style.top=e.clientY+"px"
            divObj.innerHTML = item.innerHTML +'<div id="test"></div>'
        }
        } 
        )
        item.onmouseout = function() {
        var divObj = document.querySelector('div')
        divObj.style.display = 'none'
    }
    </script>
    